<template>
  <div class="bg">
    <h1>用户登陆</h1>
    <van-form @submit="onSubmit" class="form">
      <van-cell-group inset>
        <van-field
          v-model="form.userName"
          name="userName"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="form.passWord"
          type="password"
          name="passWord"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px" class="btn">
        <van-button round block type="primary" native-type="submit"> 提交 </van-button>
      </div>
    </van-form>
  </div>
</template>
<script setup>
import { reactive } from "vue";
import { login } from "../../api/login";
import { useRouter } from "vue-router";
const router = useRouter();
//表单数据
const form = reactive({
  userName: "",
  passWord: "",
});
//提交表单数据
const onSubmit = () => {
  login(form).then(({ data }) => {
    if (data.code === 10000) {
      localStorage.setItem("pz_h5_token", data.data.token);
      localStorage.setItem("h5_userInfo", JSON.stringify(data.data.userInfo));
      router.push("/home");
    }
  });
};
</script>
<style lang="less" scoped>
h1 {
  text-align: center;
  padding-top: 30px;
}
.bg {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.btn {
  margin: 16px 16px;
}
.form {
  margin-top: 30px;
}
</style>
